vue js 移动端 pc 端 下载文件(文件流格式)PDF png xls 等格式通用!!!详细讲解、注释加代码 |
您所在的位置:网站首页 › blob pdf 失败 › vue js 移动端 pc 端 下载文件(文件流格式)PDF png xls 等格式通用!!!详细讲解、注释加代码 |
多文件pc端 移动端web下载 js+vue 实现
问题 ① 后端返回值是文件流 ② 移动端点击无效 ③ 多种类型的文件下载 pdf png doc xls 等 ④ pc端,安卓端,苹果端 ⑤ 无状态码,如何判断是文件流还是传失败了 思路: ① 请求后端获取文件流 ② 将文件流转换为blob链接 ③ blob链接转化时要注意添加mime类型 (移动端不加此步会导致下载失效) ④ js创建一个a标签,并触发click点击下载 整体代码放在后面,新手试错,有问题请友善交流 效果:pc端: 一、首先介绍mime 浏览器通常使用MIME类型(而不是文件扩展名)来确定如何处理URL,因此Web服务器在响应头中添加正确的MIME类型非常重要。如果配置不正确,浏览器可能会曲解文件内容,网站将无法正常工作,并且下载的文件也会被错误处理。 详细介绍以及类型见mdn 链接: MIME 三、文件下载 通过js生成一个a链接节点,绑定文件下载链接,然后触发a的click事件 download是文件名字 href链接绑定blob上文转换的blob链接(移动端下载时,blob链接要加上mime类型,pc端可加可不加) const a = document.createElement('a'); a.style.display = 'none'; a.download = fileName; a.href = blobUrl; a.click();四、完整代码 getFileById() { let params = {}; // 此处为向后端请求的参数 let fileName = ''; // 此处为下载的文件名字,包括格式后缀,如 test.jpg let url = ''; // 此处为请求链接 let fileTypeMime = ''; // 文件mime类型 // 个人赋值 params = { taskCommonId: this.commonId }; fileName = this.fileUrl; url = `${window._CONFIG['domianURL']}trial/task/plan/common/getFileByTaskCommonId`; let suffix = fileName.split(); // split后获得文件后缀 suffix = suffix[suffix.length-1]; switch (suffix) { // switch获取后缀对应的mime 可参考上文链接 case 'png': fileTypeMime = 'image/png'; break; case 'doc': fileTypeMime = 'application/msword'; break; case 'docx': fileTypeMime = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'; break; case 'jpg': case 'jpeg': fileTypeMime = 'image/jpeg'; break; case 'gif': fileTypeMime = 'image/gif'; break; case 'svg': fileTypeMime = 'image/svg+xml'; break; case 'tif': case 'tiff': fileTypeMime = 'image/tiff'; break; case 'txt': fileTypeMime = 'text/plain'; break; case 'ppt': fileTypeMime = 'application/vnd.ms-powerpoint'; break; case 'pptx': fileTypeMime = 'application/vnd.openxmlformats-officedocument.presentationml.presentation'; break; case 'xls': fileTypeMime = 'application/vnd.ms-excel'; break; case 'xlsx': fileTypeMime = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; break; case 'zip': fileTypeMime = 'application/zip'; break; case '7z': fileTypeMime = 'application/x-7z-compressed'; break; } this.$http({ url: url, method: 'get', responseType: 'arraybuffer', //一定要设置响应类型,否则文件会是空白 params: params, }).then((data) => { let content = data;//arraybuffer类型数据 let resBlob = new Blob([content]); let reader = new FileReader(); reader.readAsText(resBlob, 'utf-8'); reader.onload = () => { try { // 判断是否可以转化为json格式,可以就说明不是文件流,错误返回值 let res = JSON.parse(reader.result); console.log(res); this.$message.destroy(); this.$message.error(res.message); } catch { // 报错说明不能转化为json,是文件流,下载文件 console.log('res status', data); // let blob = new Blob([data]); // 原 此种方式在pc端可以下载,但是手机端不行 let blob = new Blob([data], { 'type': fileTypeMime }); // const blobUrl = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.download = fileName; a.href = blobUrl; a.click(); } }; }); }, |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |